import React, { Component } from 'react';
import { Card, Button, Radio } from 'antd';
import '../style.less';

export default class Buttons extends Component{
	state = {
		loading: true,
		size: 'default'
	}
	handleLoading = () => {
		this.setState({
			loading: false
		})
	}

	handleChange = (e) => {
		this.setState({
			size: e.target.value
		})
	}

	render(){
		return (
			<div>
				<Card title="基础按钮">
					<Button type="primary">主按钮</Button>
					<Button>普通按钮</Button>
					<Button type="dashed">虚线按钮</Button>
					<Button type="danger">警告按钮</Button>
					<Button disabled>禁止按钮</Button>
				</Card>
				<Card title="图形按钮">
					<Button icon="plus">创建</Button>
					<Button icon="edit">编辑</Button>
					<Button icon="delete">删除</Button>
					<Button shape="circle" icon="search"></Button>
					<Button type="primary" icon="search">搜索</Button>
					<Button type="primary" icon="download">下载</Button>
				</Card>
				<Card title="loading按钮">
					<Button type="primary" loading={this.state.loading}>创建</Button>
					<Button type="primary" shape="circle" loading={this.state.loading}></Button>
					<Button loading={this.state.loading}>点击加载</Button>
					<Button shape="circle" loading={this.state.loading}></Button>
					<Button type="primary" onClick={this.handleLoading}>关闭</Button>
				</Card>
				<Card title="按钮组">
					<Button.Group>
						<Button type="primary" icon="left" style={{marginRight: 0}}>返回</Button>
						<Button type="primary" icon="right">前进</Button>
					</Button.Group>
				</Card>
				<Card title="按钮尺寸">
					<Radio.Group size={this.state.size} onChange={this.handleChange}>
						<Radio value="small">小</Radio>
						<Radio value="default">中</Radio>
						<Radio value="large">大</Radio>
					</Radio.Group>
					<Button type="primary" size={this.state.size}>主按钮</Button>
					<Button size={this.state.size}>普通按钮</Button>
					<Button type="dashed" size={this.state.size}>虚线按钮</Button>
					<Button type="danger" size={this.state.size}>警告按钮</Button>
					<Button disabled size={this.state.size}>禁止按钮</Button>
				</Card>
			</div>
		);
	}
}